<script setup>
import * as api from "@/api/v-sys-service/sys-manage/org/index.js";
import Consts from "@/const"

const emits = defineEmits([
  'query',
  'update:modelValue'
])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  title: {
    type: String,
    default: '',
  }
})
const orgOptions = ref([])
const formData = ref({
  id: '', //机构ID
  parentId: Consts.ROOT_NODE_ID, //上级机构ID 初始化为根节点id
  name: '',//机构名称
  uniqueCode: '',//机构编号
  status: true,//机构是否可用(true:启用;false:禁用;)
  sort: 1,//排序
})

const saveBtnLoading = ref(false)
const formRef = ref()

const rules = ref({
  parentId: [{ required: true, message: "请选择顶级机构", trigger: "blur" }],
  name: [{ required: true, message: "请输入机构名称", trigger: "blur" }],
  uniqueCode: [{ required: true, message: "请输入机构编号", trigger: "blur" }],
  status: [{ required: true, message: "请选择机构状态", trigger: "blur" }],
})
const visible = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)

watch(
    props.rowData,
    (val) =>{
      if (val) Object.assign(formData.value,val,{children: null})
    },
    {
      immediate: true,
    }
)
onMounted(()=>{
  init()
})
const init = () => {
  init_Cache()
}
const init_Cache = () => {
  const params = {
    pid: props.rowData.parentId || '',
    pName: props.rowData.parentName || ''
  }
  api.listOrgOptions(params).then(({data})=>{
    orgOptions.value = data;
  })
}
const init_FormData = () => {
  formData.value = {
    id: '',
    parentId: Consts.ROOT_NODE_ID,
    name: '',
    status: true,
    sort: 1,
  }
}
const sure = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      saveBtnLoading.value = true
      const { code } = await api.save(formData.value)
      saveBtnLoading.value = false
      if (code === 200){
        visible.value = false
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        emits('query')
      }
    }
  })
}
</script>

<template>
  <v-dialog v-model="visible" :loading="saveBtnLoading" :title="title" @sure="sure" @cancel="init_FormData">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="上级机构" prop="parentId">
            <el-tree-select
                v-model="formData.parentId"
                placeholder="选择上级机构"
                :data="orgOptions"
                filterable
                check-strictly
                :render-after-expand="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入机构名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构编号" prop="uniqueCode">
            <el-input v-model="formData.uniqueCode" placeholder="请输入机构编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构状态">
            <el-radio-group v-model="formData.status">
              <el-radio :value="true">正常</el-radio>
              <el-radio :value="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input-number
                v-model="formData.sort" style="width: 100px"
                controls-position="right" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </v-dialog>

</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
</style>